/**
 * @file WishlistPage.jsx
 * @description 用户心愿单页面组件。
 */
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { removeItemFromWishlist } from '../store/wishlistSlice';
import { addItem as addItemToCart } from '../store/cartSlice'; // 重命名导入以避免冲突
import toast from 'react-hot-toast';
import { FaHeartBroken, FaShoppingCart, FaInfoCircle } from 'react-icons/fa'; // 导入图标

const WishlistPage = () => {
  const dispatch = useDispatch();
  const { items: wishlistItems } = useSelector((state) => state.wishlist);
  const { isAuthenticated } = useSelector((state) => state.auth); // 用于确保用户已登录

  if (!isAuthenticated) {
    // 理论上 ProtectedRoute 会处理，但作为后备
    return (
      <div className="container my-5 py-5 text-center">
        <FaInfoCircle size={50} className="text-warning mb-3" />
        <h4>请先登录以查看您的心愿单。</h4>
        <Link to="/login" className="btn btn-primary mt-3">前往登录</Link>
      </div>
    );
  }

  const handleRemoveFromWishlist = (productId) => {
    dispatch(removeItemFromWishlist(productId));
  };

  const handleAddToCartFromWishlist = (product) => {
    dispatch(addItemToCart(product)); // 使用重命名的 action
    // 可以选择在添加到购物车后从心愿单移除
    // dispatch(removeItemFromWishlist(product.id)); 
    // toast.success(`${product.title.substring(0,20)}... 已添加到购物车并从心愿单移除。`);
  };

  if (wishlistItems.length === 0) {
    return (
      <div className="container my-5 py-5 text-center">
        <FaHeartBroken size={50} className="text-muted mb-3" />
        <h4>您的心愿单是空的。</h4>
        <p className="text-muted">浏览商品，把喜欢的加入心愿单吧！</p>
        <Link to="/products" className="btn btn-primary mt-3">去发现商品</Link>
      </div>
    );
  }

  return (
    <div className="container my-5 py-5">
      <div className="row mb-4">
        <div className="col-12 text-center">
          <h1 className="display-5 fw-bold">我的心愿单</h1>
          <hr />
        </div>
      </div>

      <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        {wishlistItems.map((item) => (
          <div key={item.id} className="col">
            <div className="card h-100 shadow-sm">
              <Link to={`/product/${item.id}`} className="text-decoration-none">
                <img 
                  src={item.image} 
                  className="card-img-top p-3" 
                  alt={item.title} 
                  style={{ height: '200px', objectFit: 'contain' }} 
                />
              </Link>
              <div className="card-body d-flex flex-column">
                <h5 className="card-title fs-6">
                  <Link to={`/product/${item.id}`} className="text-decoration-none text-dark">
                    {item.title.substring(0, 40)}{item.title.length > 40 ? '...' : ''}
                  </Link>
                </h5>
                <p className="card-text fw-bold mt-auto mb-2">${item.price.toFixed(2)}</p> {/* mt-auto 将价格推到底部附近 */}
              </div>
              <div className="card-footer bg-transparent border-top-0 pb-3 text-center">
                <button 
                  className="btn btn-sm btn-outline-primary me-2 mb-2"
                  onClick={() => handleAddToCartFromWishlist(item)}
                  title="添加到购物车"
                >
                  <FaShoppingCart className="me-1" /> 加入购物车
                </button>
                <button 
                  className="btn btn-sm btn-outline-danger mb-2"
                  onClick={() => handleRemoveFromWishlist(item.id)}
                  title="从心愿单移除"
                >
                  <FaHeartBroken className="me-1" /> 移除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
       <div className="text-center mt-5">
            <Link to="/profile" className="btn btn-outline-secondary">
                返回用户中心
            </Link>
        </div>
    </div>
  );
};

export default WishlistPage;